<template>
  <div>
    <custom-dialog v-model:visible="isShowDialog">
      <div class="dialog-content">
        <div class="title" v-if="actionType === 'add'">新增计算机</div>
        <div class="title" v-else>修改计算机名称</div>
      </div>
      <div class="form-box">
        <div class="form-item">
          <div class="title">计算机名称</div>
          <el-input class="input" v-model.trim="getComputerName"></el-input>
        </div>
        <div class="form-item">
          <div class="title">计算机实际名称</div>
          <el-input disabled class="input" v-model.trim="form.real_name"></el-input>
        </div>
      </div>
      <div class="receive-bottom-btn">
        <div class="cancel-btn" @click="onCancel">取消</div>
        <div class="confirm-btn" :class="isHasValue ? 'active' : ''" @click="onConfirm">确定</div>
      </div>
    </custom-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { computerAdd, computerEdit } from '@/api/computer'
import { throttle } from '@/utils/toolsValidate'
import CustomDialog from '@/components/CustomDialog/Index.vue'

const props = defineProps({
  addComputerVisible: { type: Boolean, default: false },
  actionType: { type: String, default: 'add' },
  computerId: { type: String, default: '' },
  computerName: { type: String, default: '' }
})
const emit = defineEmits(['update:addComputerVisible', 'onConfirm', 'update:computerName'])

const isShowDialog = computed({
  get: () => props.addComputerVisible,
  set: val => emit('update:addComputerVisible', val)
})

const form = reactive({ nick_name: '', real_name: '' })

const isHasValue = computed(() => Boolean(getComputerName.value))

const getComputerName = computed({
  get: () => props.computerName,
  set: val => {
    emit('update:computerName', val)
    form.nick_name = val
  }
})

// 获取本地计算机名称
// const os = window.require && window.require('os')
// console.log('系统信息os：》》》',os)

watch(
  () => isShowDialog.value,
  async val => {
    if (val) {
      try {
        const computerName = await (window as any).system.getComputerName()
        form.real_name = computerName
      } catch (error) {}
    }
  }
)

function onCancel() {
  isShowDialog.value = false
  emit('update:computerName', '')
}

const onConfirm = throttle(function () {
  if (!isHasValue.value) return
  if (props.actionType === 'add') {
    computerAdd(form).then(res => {
      if (res.status === 200) {
        ElMessage.success('添加成功')
        emit('onConfirm')
        isShowDialog.value = false
        emit('update:computerName', '')
      }
    })
    return
  }
  form.computer_id = props.computerId
  computerEdit(form).then(res => {
    if (res.status === 200) {
      ElMessage.success('修改成功')
      emit('onConfirm')
      isShowDialog.value = false
      emit('update:computerName', '')
    }
  })
}, 3000)
</script>

<style lang="scss" scoped>
.dialog-content .title {
  font-size: 20px;
  font-family:
    PingFang SC,
    PingFang SC-Bold;
  font-weight: 700;
  text-align: left;
  color: #000000;
  margin-bottom: 10px;
}
.form-box {
  display: flex;
  align-items: center;
  padding: 30px 0 68px 0;
  box-sizing: border-box;
}
.form-box .form-item {
  width: 350px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.form-box .form-item .title {
  font-size: 18px;
  font-family:
    PingFang SC,
    PingFang SC-Regular;
  font-weight: 400;
  color: #333333;
  display: inline-block;
  margin-right: 20px;
}
.form-box .form-item .input {
  width: 200px;
  height: 48px;
  background: #ffffff;
  border-radius: 12px;
}
.form-box .form-item .select {
  width: 200px;
  height: 48px;
  background: #ffffff;
  border-radius: 12px;
}
.form-box .form-item .form-btn {
  width: 204px;
  height: 48px;
  background: #7c0a03;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family:
    PingFang SC,
    PingFang SC-Regular;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  margin-left: 20px;
}
.receive-bottom-btn {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 52px;
}
.receive-bottom-btn .cancel-btn {
  width: 134px;
  height: 52px;
  line-height: 52px;
  background: #ffffff;
  border: 1px solid #333333;
  border-radius: 12px;
  font-size: 18px;
  font-family:
    PingFang SC,
    PingFang SC-Regular;
  font-weight: 400;
  text-align: center;
  color: #333333;
  cursor: pointer;
}
.receive-bottom-btn .active {
  background: #7c0a03 !important;
}
.receive-bottom-btn .confirm-btn {
  width: 132px;
  height: 52px;
  background: #d2d2d2;
  line-height: 52px;
  border-radius: 12px;
  font-size: 18px;
  font-family:
    PingFang SC,
    PingFang SC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  margin-left: 40px;
  cursor: pointer;
}
</style>
